<template>
  <el-card class="page-tools">
    <!-- 封装一个顶部左右按钮的工具栏 -->
    <el-row type="flex" justify="space-between" align="middle">
      <el-col :span="4">
        <!-- 前 -->
        <!-- 放了一个插槽 -->
        <div class="before">
          <slot name="before"/>
        </div> 
      </el-col>
      <el-col :span="4">
        <el-row type="flex" justify="end">
          <!-- 后 -->
          <div class="after" v-if="showAfter">
            <slot name="after"/>
          </div>
        </el-row>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
//组件可以显示左右侧内容，如果某一侧内容不传，图标不应该显示
export default {
  props:{
    showAfter:{
      default:false,
      type:Boolean
    }
  }
}
</script>

<style lang='scss'>
.page-tools {
    // margin: 3px 0 0;
    .after {
      // line-height: 30px;
    display: inline-block;
    // padding: 0px 3px;
    border-radius: 3px;
   
  }
 }
</style>